<template>
    <div class='app' v-loading="loading">
       
        <div class='ceng ' >
          
           
            <div class='contentMain'>
                <div class='titles2' >
                    
                    <img :src='logo' v-if="logo!=''"/> <span :style="{color:color}">{{title}}</span>
                    <div class='user' >
                                
                        <el-dropdown>
                            <span class="el-dropdown-link" :style="{fontSize:'14px',color:color,cursor:'pointer'}">
                                <div><i class='fa fa-user-circle' :style="{fontSize:'25px',color:color}"></i></div>
                                {{username}}
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-lock" @click.native="updatePwd()">修改密码</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-user" @click.native="logout()">退出登陆</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-user" @click.native="freshs()">刷新</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    
                    
                    </div>
                </div>
                <div :class="{'content':true,'content_1':data.length<7}">
                    <div class='item ' v-for="(item,index) in data" :key="index">
                        <div class='flex-column item_warp'  @click="openWin(item)">
                            <div :class='item.classItem'>
                            <i :class="item.fa" v-if="item.fa"></i>
                            <img :src="item.icon" v-else-if="item.icon" style='width:100%'/>
                            </div>
                            <div class='itemx'>
                                {{item.text}}
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
           
        </div>
        <el-dialog
            title="修改密码"
            :visible.sync="dialogVisible"
            append-to-body
            width="30%"
            >
            
            <el-form ref="form"  label-width="80px">
                <el-form-item label="旧密码">
                    <el-input v-model="oldPwd" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-form ref="form"  label-width="80px">
                <el-form-item label="新密码">
                    <el-input v-model="newPwd" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-form ref="form"  label-width="80px">
                <el-form-item label="确认密码">
                    <el-input v-model="newPwd2" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-alert
                title="密码中必须包含字母（不区分大小写）、数字，至少8个字符，最多30个字符"
                type="error"
                show-icon>
            </el-alert>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePwdHt">确 定</el-button>
            </span>
            </el-dialog>


            <el-dialog
            title="修改密码"
            :visible.sync="dialogVisiblepwd"
            append-to-body
            class="updatepwds"
            width="30%"
            >
            
            <el-form ref="form"  label-width="80px">
                <el-form-item label="旧密码">
                    <el-input v-model="oldPwd" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-form ref="form"  label-width="80px">
                <el-form-item label="新密码">
                    <el-input v-model="newPwd" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-form ref="form"  label-width="80px">
                <el-form-item label="确认密码">
                    <el-input v-model="newPwd2" show-password></el-input>
                </el-form-item>
            </el-form>
             <el-alert
                title="密码中必须包含字母（不区分大小写）、数字，至少8个字符，最多30个字符"
                type="error"
                show-icon>
            </el-alert>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updatePwdHt">确 定</el-button>
            </span>
            </el-dialog>
    </div>
    
</template>
<script>
import Vue  from 'vue'
import waterMark from '../utils/waterMark'
export default {
    data(){
        return {
            color:sessionStorage.getItem("color"),
            logo:sessionStorage.getItem("logo"),
            loading:true,
            title:'',
            modelId:'',
            data:[],
            titles:'',
            modelIds:'',
            oldPwd:'',
            newPwd:'',
            newPwd2:'',
            filenames:"",
            dialogVisible:false,
            dialogVisiblepwd:false,
            isApp:"N",
            username:localStorage.getItem("username")
        }
    }, 
    created(){
        if(sessionStorage.getItem("isUpdatePwd")=='Y'){
            this.dialogVisiblepwd=true;
        }
     // console.log(this.$route.query.titles);
     if(this.$route.query.title){
      this.title=this.$route.query.title;
     sessionStorage.setItem("title",this.title);
     }
     //alert(this.title)
     if(!this.$route.query.title){
         this.title=sessionStorage.getItem("title")
     }
     if(this.$route.query.isApp){
         this.isApp=this.$route.query.isApp;
     }
     if(this.$route.query.filenames){
         this.filenames=this.$route.query.filenames;
     }
      document.title=this.title;
     
    document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
    
      this.loadData();
        
    },
    watch:{
        modelId(val){
            this.loadData();
        }
    },
    mounted(){
    // 你要的内容
        if(localStorage.getItem("isWater")=="Y"){
            waterMark.set( localStorage.getItem("username"))
            sessionStorage.setItem("hasWater","Y")
        }
            
    },
    methods:{
        freshs(){
            location.reload()
        },
        loadData(){
            this.loading=true;
            if(!this.modelId){
                /*this.data=[{
                        text:'殡仪馆业务管理系统',
                        fa:'fa fa-university',
                        modelId:'1',
                        classItem:'img item1'
                    },
                    {
                        text:'公墓管理系统',
                        fa:'fa fa-inbox',
                        modelId:'363',
                        classItem:'img item4'
                    },
                    {
                        text:'OA办公',
                        fa:'fa fa-television',
                        modelId:'299',
                        classItem:'img item2',
                        id:'299'
                    },
                    {
                        text:'权限管理',
                        fa:'fa fa-users',
                        modelId:'31',
                        classItem:'img item3',
                        id:'31',
                        isModel:'Y'
                    }]*/
                    this.modelId="-1";
            } 
            let sef=this;
            let imgIp=localStorage.getItem("imgIp") 
            /**获取桌面模块，目前定义所有的模块显示，没有设置自主模块 */
            
            this.$post('api','api/model/getUserModelsByJson',{filename:this.filenames,isApp:this.isApp,isYtj:sessionStorage.getItem("isYtj")}).then(res=>{
            
                this.loading=false;
                let nav=JSON.parse(unescape(res[0].nav));

                
               // sessionStorage.setItem("mainModel",unescape(res[0].nav));
               sessionStorage.setItem("mainModel","[]");
                sef.data=[];
                for(let i=0;i<nav.length;i++){
                    let index=i+1;
                    if(index>6){
                            index=index%6;
                    }
                        
                    let n=nav[i];
                   // n.icon=imgIp+n.icon;
                    n.classItem="img item"+index;

                   

                    sef.data.push(n);
                  
                }
            });
        },
        openWin(item){
          
            let url="";
            if(item.url.indexOf("http")==-1&&item.isBlank!='Y'){
               
                if(item.url=="main"){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                
                    url="/main";
                    
                }else if(item.url.indexOf("tabMain")!=-1){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    let key=item.key;
                    if(filename)
                        url= "/byg/tabMain?title="+item.text+"&filename="+filename+"&isDesktop="+item.isDesktop+"&isMain=Y"
                    else
                        url= item.url+"&title="+item.text+"&isDesktop="+item.isDesktop+"&isMain=Y"
                }else if(item.url.indexOf("list")!=-1){
                
                    let key=item.key;
                    url=item.url.indexOf("?")==-1 ? item.url+"?key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey:item.url+"&key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey;
                }else if(item.url!=''){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    //alert(item.url);
                   url=item.url.indexOf("?")==-1 ? item.url+"?title="+item.text+"&filename="+filename:item.url+"&title="+item.text+"&filename="+filename;
                }else{
                    let titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    let key=item.key;
                    url= "/byg/tabMain?title="+item.text+"&filename="+filename+"&isDesktop="+item.isDesktop+"&isMain=Y"
                }
                if(url.indexOf("main?")!=-1){
                    this.title=item.text;
                    if(this.isApp=="Y"){
                        this.data=item.children
                    }
                }else{
                    
                    this.$router.push({path:url});
                }
            }else{
                window.open(item.url, "_blank");
            }
             
            
        },
        returns(){
            
           let titles=this.titles.split(",")
           this.title=titles[0];
           this.modelId="-1";
           
        },
        logout(){
            sessionStorage.setItem("token","");
            localStorage.setItem("username","");
            localStorage.setItem("userId","");
            if(sessionStorage.getItem("logout")){
                this.$router.push({path:sessionStorage.getItem("logout")});
            }else
                this.$router.push({path:"/login?sCode="+localStorage.getItem("sCode")+"&isApp="+this.isApp+"&filenames="+this.filenames+"&logout=Y&isYtj="+sessionStorage.getItem("isYtj")});
           
        },
        updatePwd(){
            this.oldPwd="";
            this.newPwd2="";
            this.newPwd="";
            this.dialogVisible=true;

        },
        updatePwdHt(){
            let isOk=true;
            if(this.newPwd==''){
                isOk=false;
                this.$alert("密码不能为空", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(this.newPwd!=this.newPwd2&&isOk){
                isOk=false;
                this.$alert("两次密码不一致，请检查", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
            if (!pwdRegex.test(this.newPwd)&&isOk) {
                isOk=false;
                this.$alert("密码必须包含字母和数字，并且要大于8位数", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(isOk){
                 this.$post("api","api/login/updatePwd",{oldPwd:this.oldPwd,newPwd:this.newPwd}).then(data=>{
                     this.$alert(data[0].msg, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            if(data[0].status=="+OK"){
                                this.dialogVisible=false;
                                
                                this.dialogVisiblepwd=false;
                                if(sessionStorage.getItem("isUpdatePwd")=="Y"){
                                    sessionStorage.setItem("isUpdatePwd","N");
                                    sessionStorage.setItem("token","");
                                    localStorage.setItem("username","");
                                    localStorage.setItem("userId","");
                                    this.$router.push({path:"/login?sCode="+localStorage.getItem("sCode")+"&isApp="+this.isApp+"&filenames="+this.filenames+"&logout=Y&isYtj="+sessionStorage.getItem("isYtj")});
                                
                                }
                            }
                        }
                    });
                     
                })
            }
        }
    }
}
</script>

<style scoped  src="../assets/css/mainnew.css">
</style>
<style scoped>
    .updatepwds>>>.el-dialog{
        top:35%;
        left:30%;
    }
    .updatepwds>>>.el-dialog__headerbtn{
        display:none !important;
    }
</style>